<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #clock{
        position: relative;
        width: 600px;
    }
    #hand img{
        position: absolute;
        top:0;
        left: 50%;
        transform: translateX(-50%);
    }

</style>

<body>

    <div id="clock">
        <img src="images/clockface.jpg" alt="">

        <div id="hand">
            <img src="images/hourhand.png" alt="">
            <img src="images/minhand.png" alt="">
            <img src="images/sechand.png" alt="">
        </div>

    </div>

    <script>
        
        function showTime() {
            var date = new Date();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            console.log(h,m,s);
          
            var imgs = document.querySelectorAll('#hand>img');
            imgs[0].style.transform='rotate('+h*30+'deg)'
            imgs[1].style.transform='rotate('+m*6+'deg)'
            imgs[2].style.transform='rotate('+s*6+'deg)'
        }
        showTime();
        setInterval(showTime,1000);

    </script>
</body>

</html>